<template>
  <div class="p-4">
    <el-form :model="consultantInfo" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="consultantInfo.username" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="consultantInfo.password" type="password" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="consultantInfo.name" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="consultantInfo.phone" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="consultantInfo.gender" :disabled="!isEditMode">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="头像">
        <el-upload
            action="#"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            @success="handleAvatarSuccess"
            :disabled="!isEditMode"
        >
          <template #trigger>
            <img :src="consultantInfo.avatarUrl || 'https://picsum.photos/100/100'" alt="Avatar" class="w-20 h-20 rounded-full">
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="地区">
        <el-input v-model="consultantInfo.region" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-form-item label="个人简介">
        <el-input type="textarea" v-model="consultantInfo.introduction" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-form-item label="等级编号">
        <el-select v-model="consultantInfo.levelNumber" :disabled="!isEditMode">
          <el-option label="国家一级心理咨询师" value="1"></el-option>
          <el-option label="国家二级心理咨询师" value="2"></el-option>
          <el-option label="国家三级心理咨询师" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否认证">
        <el-select v-model="consultantInfo.isCertified" :disabled="!isEditMode">
          <el-option label="是" value="是"></el-option>
          <el-option label="否" value="否"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="toggleEditMode" v-if="!isEditMode">编辑</el-button>
        <el-button type="primary" @click="saveInfo" v-if="isEditMode">保存</el-button>
        <el-button @click="cancelEdit" v-if="isEditMode">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

// 模拟咨询师个人信息
const consultantInfo = reactive({
  username: 'consultant01',
  password: '123456',
  name: '张三',
  phone: '13800138000',
  gender: '男',
  avatarUrl: '',
  region: '北京市',
  introduction: '这是一位经验丰富的心理咨询师。',
  levelNumber: '2',
  isCertified: '是'
});

const isEditMode = ref(false);
const originalInfo = reactive({ ...consultantInfo });

const toggleEditMode = () => {
  isEditMode.value = !isEditMode.value;
};

const saveInfo = () => {
  // 这里可以添加保存到后端的逻辑
  ElMessage.success('信息保存成功');
  isEditMode.value = false;
  Object.assign(originalInfo, consultantInfo);
};

const cancelEdit = () => {
  Object.assign(consultantInfo, originalInfo);
  isEditMode.value = false;
};

const beforeAvatarUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    ElMessage.error('只能上传 JPG/PNG 格式的图片！');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB！');
  }
  return isJpgOrPng && isLt2M;
};

const handleAvatarSuccess = (response, file) => {
  // 这里模拟上传成功后更新头像 URL
  consultantInfo.avatarUrl = URL.createObjectURL(file.raw);
  ElMessage.success('头像上传成功！');
};
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>